<template>
  <view class="tabs">
    <view class="tab-container">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab"
        :class="{ active: currentIndex === index }"
        @click="changeTab(index)"
      >
        {{ tab.title }}
      </view>
    </view>
    <view class="tab-content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    tabs: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currentIndex: 0, // 当前激活的tab索引
    }
  },
  methods: {
    changeTab(index) {
      this.currentIndex = index
      this.$emit('change', index) // 触发自定义事件，传递当前索引
    },
  },
}
</script>

<style scoped>
.tabs {
  width: 100%;
}
.tab-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #eee;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}
.tab.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}
.tab-content {
  padding: 10px;
}
</style>
